import Vue from 'vue'
import App from './App.vue'
//引入index.js文件的路由对象
import router from './router'

//引入 vant ui
//1.引入 vant ui 组件库
import Vant from 'vant'
//2.引入对应的css文件
import 'vant/lib/index.css'
//3.引入组件
Vue.use(Vant)

//引入请求库  axios
import axios from 'axios'
//axios 基准地址
axios.defaults.baseURL = 'http://127.0.0.1:3000'

//*** 请求拦截器
//拦截的不是结果，而是请求的设置
axios.interceptors.request.use(config => {
  //判断：如果本地有token，但是请求时没有token，就在请求上添加token
  if (localStorage.getItem('token') && !config.headers.Authorization) {
    config.headers.Authorization = localStorage.getItem('token')
  }
  //用return放行
  return config
})

//*** 响应拦截器
//这个拦截器可以拦截到所有请求的响应，并执行逻辑，需要将逻辑作为函数传入
import { Toast } from 'vant'
axios.interceptors.response.use(res => {
  console.log(res.data);
  //对获取的数据进行结构
  const { message, statusCode } = res.data
  if (statusCode && statusCode == 401) {
    //使用全局vant ui的轻提示 
    Toast('用户信息校验失败，请重新登录')
    localStorage.removeItem("token");
    localStorage.removeItem("userId");
    router.replace("/login");


  }
  //res是每次请求得到的结果，相当于.then的res还没到达之前在这里被拦截
  //拦截器把结果拦住，卡死整个执行过程，执行完我们要的函数以后，必须return出res，相当于路由守卫的next（）
  return res
})


//将axios绑定到Vue的原型上
Vue.prototype.$axios = axios

//修复图片地址过滤器
Vue.filter('fixImgUrl', function (url) {
  const fullUrlReg = /^http/;
  if (fullUrlReg.test(url)) {
    return url;
  } else {
    return $axios.defaults.baseURL + url;
  }
})




//路由守卫
//全局前置路由守卫，会在所有路由发生变化之前进行拦截，调用router的beforeEach方法
//拦截所有跳转，跳转之前都会执行一个函数，作为参数传进去
router.beforeEach((to, from, next) => {
  //to:目标路由
  //from：来源路由
  //next：守卫会拦住整个导航过程，导致页面挺住，需要next放行
  console.log(from.name);
  console.log(to.name);
  console.log('进入了守卫');
  //拦截路由的时候，进行第一层校验
  if (to.meta.auth) {
    //跳转目标为个人中心
    const token = localStorage.getItem('token')
    console.log(token);

    if (token) {
      //token存在，放行
      next()
    } else {
      //不存在token，跳转到登录页
      console.log('不存在token,将跳转到登录页');
      router.push('/login')
    }
  } else {
    //目标路由只要不是个人中心，就放行
    next()
  }
})

Vue.config.productionTip = false
//Vue 对象
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
